<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ音乐-特权成长</title>
    <link rel="shortcut icon" href="https://y.qq.com/favicon.ico?max_age=2592000" type="image/x-icon">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/base(1).css">
    <link rel="stylesheet" href="./css/vip-base.css">
    <link rel="stylesheet" href="./css/vip-power.css">
    <link rel="stylesheet" href="./css/vip-base-footer.css">
    <script src="./js/echarts.min.js"></script>
   
</head>

<body>
    <!-- 背景图片 -->
    <div class="bg1">
        <div class="picture feature_box">
            <div class="picture_show_item picture_show_item_img ">
                <!-- 表格 -->
                <div class="grow_up width">
                    <h2 class="title_con">我的成长曲线</h2>
                    <div class="profile__action">
                        <p class="profile_text">激活绿钻豪华版，获得极速成长值</p>
                        <a class="mod_btn btn_bor btn--white js_openvip" data-aid="" href="javascript:;"
                            title="开通豪华绿钻">开通豪华绿钻</a>
                    </div>
                    <div class="profile_table">
                        <div class="mod_grow_histogram play">
                            <div class="histogram_control">
                                <span class="histogram_th_1">成长值</span>
                                <span class="histogram_th_2">等级</span>
                                <span class="histogram_bar_line"></span>
                            </div>
                            <div class="histogram_axis_x">
                                <div class="x">
                                    <span class="histogram_x_8">648</span>
                                    <span class="histogram_x_7">324</span>
                                    <span class="histogram_x_6">108</span>
                                    <span class="histogram_x_5">60</span>
                                    <span class="histogram_x_4">36</span>
                                    <span class="histogram_x_3">18</span>
                                    <span class="histogram_x_2">6</span>
                                    <span class="histogram_x_1">0</span>
                                </div>

                            </div>
                            <div class="histogram_axis_y">
                                <span class="histogram_y_1">LV1</span>
                                <span class="histogram_y_2">LV2</span>
                                <span class="histogram_y_3">LV3</span>
                                <span class="histogram_y_4">LV4</span>
                                <span class="histogram_y_5">LV5</span>
                                <span class="histogram_y_6">LV6</span>
                                <span class="histogram_y_7">LV7</span>
                                <span class="histogram_y_8">LV8</span>
                            </div>
                            <div class="histogram_proc">
                                <span class="histogram_bar histogram_bar_1">
                                    <span class="histogram_bar__cont">0</span>
                                </span>
                                <span class="histogram_bar histogram_bar_2">
                                    <span class="histogram_bar__cont">600</span>
                                </span>
                                <span class="histogram_bar histogram_bar_3">
                                    <span class="histogram_bar__cont">1800</span>
                                </span>
                                <span class="histogram_bar histogram_bar_4">
                                    <span class="histogram_bar__cont">3600</span>
                                </span>
                                <span class="histogram_bar histogram_bar_5">
                                    <span class="histogram_bar__cont">6000</span>
                                </span>
                                <span class="histogram_bar histogram_bar_6">
                                    <span class="histogram_bar__cont">10800</span>
                                </span>
                                <span class="histogram_bar histogram_bar_7">
                                    <span class="histogram_bar__cont">32400</span>
                                </span>
                                <span class="histogram_bar histogram_bar_8">
                                    <span class="histogram_bar__cont">64800</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 头部 -->
                <div class="nav">
                    <div class="width head">
                        <ul>
                            <li>
                                <img src="https://y.gtimg.cn/mediastyle/music_svip/img/logo.png?max_age=2592000&v=fa239e384c8df84e499677271e246c12"
                                    alt="">
                            </li>
                            <li><a href="./vip-index.html" >首页</a></li>
                            <li><a href="#"id="color">特权与等级</a></li>
                            <li><a href="./vip-annual-fee-zone.html">年费专区</a></li>
                        </ul>
                        <ul class="right">
                            <li>您还没有登录，</li>
                            <li><a href="#">请马上登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 绿钻豪华版特权与等级 -->
    <div class="container width">
        <div class="mod_title">
            <h2 class="title_con1">绿钻豪华版</h2>
        </div>
        <div class="privilege_function__cont">
            <div class="privilege_function_box">
                <ul class="privilege_function__list">
                    <li
                        class="privilege_function__item privilege_function__item--green privilege_function__item--current js_function_item">
                        <h3 class="privilege_function_tit">音乐特权</h3>
                        <div class="privilege_function_thumb">
                            <img class="privilege_function_pic"
                                src="https://y.gtimg.cn/mediastyle/music_svip/img/gallery/privilege_pic_1.jpg?max_age=2592000"
                                alt="">
                        </div>
                        <div class="privilege_function__bor"></div>
                        <div class="privilege_function__arrow_up"></div>
                        <div class="privilege_function__arrow_down"></div>
                    </li>
                    <li class="privilege_function__item privilege_function__item--yellow js_function_item">
                        <h3 class="privilege_function_tit">付费歌曲特权</h3>
                        <div class="privilege_function_thumb">
                            <img class="privilege_function_pic"
                                src="https://y.gtimg.cn/mediastyle/music_svip/img/gallery/privilege_pic_2.jpg?max_age=2592000"
                                alt="">
                        </div>
                        <div class="privilege_function__bor"></div>
                        <div class="privilege_function__arrow_up"></div>
                        <div class="privilege_function__arrow_down"></div>
                    </li>
                    <li class="privilege_function__item privilege_function__item--red js_function_item">
                        <h3 class="privilege_function_tit">身份特权</h3>
                        <div class="privilege_function_thumb">
                            <img class="privilege_function_pic"
                                src="https://y.gtimg.cn/mediastyle/music_svip/img/gallery/privilege_pic_3.jpg?max_age=2592000"
                                alt="">
                        </div>
                        <div class="privilege_function__bor"></div>
                        <div class="privilege_function__arrow_up"></div>
                        <div class="privilege_function__arrow_down"></div>
                    </li>
                    <li class="privilege_function__item privilege_function__item--purple js_function_item">
                        <h3 class="privilege_function_tit">生活特权</h3>
                        <div class="privilege_function_thumb">
                            <img class="privilege_function_pic"
                                src="https://y.gtimg.cn/mediastyle/music_svip/img/gallery/privilege_pic_4.jpg?max_age=2592000"
                                alt="">
                        </div>
                        <div class="privilege_function__bor"></div>
                        <div class="privilege_function__arrow_up"></div>
                        <div class="privilege_function__arrow_down"></div>
                    </li>
                </ul>
            </div>
            <div class="privilege_feature__content">
                <ul class="privilege_feature__list privilege_feature__list--current js_function_feature">
                    <li class="privilege_feature__item">
                        <a href="#" class="privilege_feature__link" title="HQ高品质音乐试听">
                            <span class="privilege_icon privilege_icon_hdlisten"></span>
                            <span class="privilege_feature__text">HQ高品质音乐试听</span>
                        </a>
                    </li>
                    <li class="privilege_feature__item">
                        <a href="#" class="privilege_feature__link" title="HQ高品质音乐下载">
                            <span class="privilege_icon privilege_icon_hddownload"></span>
                            <span class="privilege_feature__text">HQ高品质音乐下载</span>
                        </a>
                    </li>
                    <li class="privilege_feature__item">
                        <a href="#" class="privilege_feature__link" title="HQ高品质音乐分享">
                            <span class="privilege_icon privilege_icon_hdshare"></span>
                            <span class="privilege_feature__text">HQ高品质音乐分享</span>
                        </a>
                    </li>
                    <li class="privilege_feature__item js_nullli null" style="display:none;"></li>
                    <li class="privilege_feature__item js_wx_hide">
                        <a href="#" class="privilege_feature__link" title="上传本地音乐">
                            <span class="privilege_icon privilege_icon_uploadnative"></span>
                            <span class="privilege_feature__text">上传本地音乐</span>
                        </a>
                    </li>
                    <li class="privilege_feature__item">
                        <a href="#" class="privilege_feature__link">
                            <span class="privilege_icon privilege_icon_sqdownload"></span>
                            <span class="privilege_feature__text">SQ无损音乐下载</span>
                        </a>
                    </li>
                    <li class="privilege_feature__item">
                        <a href="#" class="privilege_feature__link" title="SQ无损音乐试听">
                            <span class="privilege_icon privilege_icon_sqlisten"></span>
                            <span class="privilege_feature__text">SQ无损音乐试听</span>
                        </a>
                    </li>
                    <li class="privilege_feature__item">
                        <a href="#" class="privilege_feature__link" title="批量下载">
                            <span class="privilege_icon privilege_icon_listdownload"></span>
                            <span class="privilege_feature__text">批量下载</span>
                        </a>
                    </li>
                    <li class="privilege_feature__item">
                        <a href="#" class="privilege_feature__link" title="超大云歌单">
                            <span class="privilege_icon privilege_icon_spcloud"></span>
                            <span class="privilege_feature__text">超大云歌单</span>
                        </a>
                    </li>
                </ul>
                <!-- <ul class="privilege_feature__list js_function_feature">
                    <li class="privilege_feature__item">
                        <a href="#" class="privilege_feature__link" title="付费音乐下载">
                            <span class="privilege_icon privilege_icon_paydownload"></span>
                            <span class="privilege_feature__text">付费音乐下载</span>
                        </a>
                    </li>
                    <li class="privilege_feature__item">
                        <a href="#" class="privilege_feature__link" title="付费音乐试听">
                            <span class="privilege_icon privilege_icon_paylisten"></span>
                            <span class="privilege_feature__text">付费音乐试听</span>
                        </a>
                    </li>
                    <li class="privilege_feature__item">
                        <a href="#" class="privilege_feature__link" title="专属图标">
                            <span class="privilege_icon privilege_icon_payicon"></span>
                            <span class="privilege_feature__text">专属图标</span>
                        </a>
                    </li>
                </ul> -->
                <!-- <ul class="privilege_feature__list js_function_feature">
                    <li class="privilege_feature__item">
                        <a href="#" class="privilege_feature__link" title="闪电尊贵图标">
                            <span class="privilege_icon privilege_icon_flashsvip"></span>
                            <span class="privilege_feature__text">闪电尊贵图标</span>
                        </a>
                    </li>
                    <li class="privilege_feature__item">
                        <a href="#" class="privilege_feature__link" title="尊贵标识">
                            <span class="privilege_icon privilege_icon_mysvip"></span>
                            <span class="privilege_feature__text">尊贵标识</span>
                        </a>
                    </li>
                    <li class="privilege_feature__item">
                        <a href="#" class="privilege_feature__link" title="专属图标">
                            <span class="privilege_icon privilege_icon_growspeed"></span>
                            <span class="privilege_feature__text">成长加速</span>
                        </a>
                    </li>
                    <li class="privilege_feature__item">
                        <a href="#" class="privilege_feature__link" title="个性主题">
                            <span class="privilege_icon privilege_icon_styletheme"></span>
                            <span class="privilege_feature__text">个性主题</span>
                        </a>
                    </li>
                    <li class="privilege_feature__item">
                        <a href="#" class="privilege_feature__link" title="弹幕气泡">
                            <span class="privilege_icon privilege_icon_danmupop"></span>
                            <span class="privilege_feature__text">弹幕气泡</span>
                        </a>
                    </li>
                    <li class="privilege_feature__item">
                        <a href="#" class="privilege_feature__link" title="歌词海报字体">
                            <span class="privilege_icon privilege_icon_gecifont"></span>
                            <span class="privilege_feature__text">歌词海报字体</span>
                        </a>
                    </li>
                    <li class="privilege_feature__item">
                        <a href="#" class="privilege_feature__link" title="个性音乐">
                            <span class="privilege_icon privilege_icon_stylemusic"></span>
                            <span class="privilege_feature__text">个性音乐</span>
                        </a>
                    </li>
                    <li class="privilege_feature__item">
                        <a href="#" class="privilege_feature__link" title="新版抢先体验">
                            <span class="privilege_icon privilege_icon_newexperience"></span>
                            <span class="privilege_feature__text">新版抢先体验</span>
                        </a>
                    </li>
                    <li class="privilege_feature__item">
                        <a href="#" class="privilege_feature__link" title="QQ音乐首唱会">
                            <span class="privilege_icon privilege_icon_musicshow"></span>
                            <span class="privilege_feature__text">QQ音乐首唱会</span>
                        </a>
                    </li>
                    <li class="privilege_feature__item" style="display: none;">
                        <a href="#" class="privilege_feature__link" title="客户端听歌免广告">
                            <span class="privilege_icon privilege_icon_clintfreead"></span>
                            <span class="privilege_feature__text">客户端听歌免广告</span>
                        </a>
                    </li>
                    <li class="privilege_feature__item" style="display: none;">
                        <a href="#" class="privilege_feature__link" title="MV观看免广告">
                            <span class="privilege_icon privilege_icon_mvfreead"></span>
                            <span class="privilege_feature__text">MV观看免广告</span>
                        </a>
                    </li>
                </ul> -->
                <!-- <ul class="privilege_feature__list js_function_feature">
                    <li class="privilege_feature__item">
                        <div class="privilege_feature__qrcode">
                            <h3 class="privilege_feature__qrcode_tit"><span class="icon icon_vip"></span>豪华版绿钻生活特权</h3>
                            <p>请使用<span class="privilege_feature__sp_txt">手机QQ、微信</span>扫码领取</p>
                            <div class="privilege_feature__qrcode_con">
                                <img class="privilege_feature__qrcode_pic" src="">
                            </div>
                        </div>
                        <a class="privilege_feature__link" title="票务特权">
                            <span class="privilege_icon privilege_icon_ticketvip"></span>
                            <span class="privilege_feature__text">票务特权</span>
                        </a>
                    </li>
                </ul> -->
            </div>
            <div class="privilege_action">
                <a class="mod_btn btn_bor btn_lg btn_privilege btn--green js_openvip" href="javascript:;"
                    title="开通豪华绿钻">开通豪华绿钻</a>
            </div>
        </div>
    </div>
    <!-- 底部公共样式 -->
    <div class="footer_copyright">
        <p>
            <a href="//www.tencent.com/" rel="nofollow" target="_blank" title="关于腾讯">关于腾讯</a> |
            <a href="//www.tencent.com/index_e.shtml" rel="nofollow" target="_blank" title="About Tencent">About Tencent</a> |
            <a href="//www.qq.com/contract.shtml" rel="nofollow" target="_blank" title="服务条款">服务条款</a> |
            <a href="//y.qq.com/y/static/tips/service_tips.html" rel="nofollow" target="_blank" title="用户服务协议">用户服务协议</a> |
            <a href="//www.tencentmind.com/" rel="nofollow" target="_blank" title="广告服务">广告服务</a> |
            <a href="//hr.tencent.com/" rel="nofollow" target="_blank" title="腾讯招聘">腾讯招聘</a> |
            <a href="https://y.qq.com/m/client/helper/pc.html" rel="nofollow" target="_blank" title="客服中心">客服中心</a> |
            <a href="//www.qq.com/map/" rel="nofollow" target="_blank" title="网站导航">网站导航</a>
        </p>
        <p>Copyright © 1998 - <script type="text/javascript">document.write(new Date().getFullYear());</script>2022 Tencent. <a target="_blank" href="//www.tencent.com/en-us/le/copyrightstatement.shtml" rel="nofollow" title="All Rights Reserved.">All Rights Reserved.</a></p>
        <p>腾讯公司 <a target="_blank" href="https://y.qq.com/music/common/upload/t_cm3_photo_publish/3525317.jpg" rel="nofollow" title="版权所有">版权所有</a> 网络文化经营许可证：<a target="_blank" href="https://y.qq.com/music/common/upload/t_cm3_photo_publish/3525317.jpg" rel="nofollow" title="粤网文[2018]6725-2386号">粤网文[2018]6725-2386号</a></p>
    </div>
</body>

</html>